An example of a Bar chart that's using a HTML key

Instead of using a key that's drawn onto the canvas this shows you an example of using the HTML based key that was added to RGraph in December 2013. To use it effectively it will help if you first understand CSS positioning - both relative and absolute.

This goes in the documents header:

<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.key.js"></script>
<script src="RGraph.bar.js"></script>

Put this where you want the chart to show up:

<div id="container" style="position: relative">
    <canvas id="cvs" width="600" height="250">[No canvas support]</canvas>
</div>

This is the code that generates the chart:

<script>
    window.onload = function ()
    {
        var year1 = [4,5,8,6,7,8,4,6,5,3,2,1];
        var year2 = [1,2,6,8,4,9,5,6,3,5,4,4];
        var data  = [];
        
        // Combine the data
        for (var i=0; i<12; i+=1) {
            data.push([year1[i], year2[i]]);
        }
        
        // Draw the key first
        RGraph.HTML.Key('container', {
            labels: ['First year','Second year'],
            colors: ['red','#0c0'],
            tableCss: {
                top: '25px',
                left: '600px',
                position: 'absolute'
            }
        });

        // Now draw the chart (AFTER the key)
        var bar = new RGraph.Bar({
            id: 'cvs',
            data: data,
            options: {
                colors: ['red','#0c0'],
                grouping: 'stacked',
                labels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
                strokestyle: 'rgba(0,0,0,0)',
                textAccessible: true
            }
        }).draw();
    };
</script>